<template>
  <div>
    <p>一些零碎的知识点。。。</p>
    <p>动态组件 一个组件能渲染不同的内容，比如router-view。或者组件的is属性</p>
    <button @click="comName == 'Login' ? (comName = 'Reg') : (comName = 'Login')">
      toggle
    </button>
    <!-- transition组件对应的过度效果 是为了视觉上的美观 功能不变 -->
    <!-- <transition name="qqq">
      <component :is="comName"></component>
    </transition> -->
    <keep-alive>
      <!-- 使用场景：频繁切换各个模块 而且希望将组价的状态缓存起来 keep-alive可以保持组件的活性 -->
      <!-- 有特殊的生命周期 会在显示隐藏时调用 -->
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Top from "../components/Top.vue";
import Left from "../components/Left.vue";
import Login from "../views/Login.vue";
import Reg from "../views/Reg.vue";
export default {
  data() {
    return {
      comName: "Login",
    };
  },
  components: {
    Top,
    Left,
    Login,
    Reg
  },
};
</script>

<style>
.qqq-enter-active {
  transition: all 1s ease;
}
.qqq-leave-active {
  transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.qqq-enter, .qqq-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>